<template>
    <div class="buy">
        <!-- 购买列表 -->
        <div v-if="order.list.length != 0" class="list">
            <el-table :data="order.list" stripe style="width: 100%">
                <el-table-column label="商品图">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" width="150">
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="商品名"></el-table-column>
                <el-table-column label="单价">
                    <template slot-scope="scope">
                        <span>￥{{ scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="saleCount" label="数量"></el-table-column>
                <el-table-column label="小计">
                    <template slot-scope="scope">
                        <span>￥{{ scope.row.price * scope.row.saleCount }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-else class="not-list">还没有选择要购买的商品</div>

        <!-- 确认购买 -->
        <div v-if="order.list.length != 0" class="payment">
            <span>总计: ￥{{ totalPrice() }}</span>
            <button @click="payment">确认支付</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 测试数据
            // testData: {
            //     uid: 1,
            //     list: [
            //         { id: 17, count: 3, price: 185, title: "", cover: "" },
            //         { id: 5, count: 2, price: 199, title: "", cover: "" },
            //         { id: 9, count: 5, price: 220, title: "", cover: "" }
            //     ]
            // },
            testCount: 0,

            order: {
                uid: 0,
                list: []
            }
        }
    },
    methods: {
        // 获取订单参数
        getOrder(id) {
            // 获取订单
            this.$http.orderApi.orderById({ id }).then(res => {
                console.log(res);
                this.order.list[this.testCount].title = res.data.res[0].title;
                this.order.list[this.testCount].cover = res.data.res[0].cover;
                this.order.list[this.testCount].price = res.data.res[0].price.substring(1) * 1;
                this.testCount++;
                this.order = JSON.parse(JSON.stringify(this.order));
            });
            
            // 获取商品（测试）
            // this.$http.productApi.queryById({ pid: id }).then(res => {
            //     console.log(res);
            //     this.order.list[this.testCount].title = res.data.data.title;
            //     this.order.list[this.testCount].cover = res.data.data.cover;
            //     this.order.list[this.testCount].price = res.data.data.price.substring(1) * 1;
            //     this.testCount++;
            //     console.log(this.order);
            //     this.order = JSON.parse(JSON.stringify(this.order))
            // })
        },

        // 计算总计
        totalPrice() {
            let sum = 0;

            for (let i = 0; i < this.order.list.length; i++) {
                sum += this.order.list[i].price * this.order.list[i].saleCount;
            }

            return sum
        },

        // 支付操作
        payment() {
            this.$confirm('确定好了吗？', '支付确认', {
                confirmButtonText: '确认支付',
                cancelButtonText: '我想想',
                type: 'warning'
            }).then(() => {
                // 支付
                for (let i = 0; i < this.order.list.length; i++) {
                    this.$http.orderApi.payment({ id: this.order.list[i].id, payed: 1, saleCount: this.order.list[i].saleCount }).then(res => {
                        console.log(res);
                        this.$router.push("/account/shopping");
                    });
                }
                this.$message({
                    type: 'success',
                    message: '支付成功'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消支付'
                });
            });
        }
    },
    mounted() {
        this.order = this.$route.query;
        this.order.list = JSON.parse(this.order.list);
        console.log(this.order);

        for (let i = 0; i < this.order.list.length; i++) {
            this.getOrder(this.order.list[i].id);
        }
    }
}
</script>

<style lang="scss" scoped>
.buy {
    // height: 500px;
    background-color: #efefef;
    padding: 100px 0;

    >div {
        width: 1100px;
        margin: 0 auto;

        &.list {
            background-color: #fff;
        }

        &.not-list {
            background-color: #fff;
            text-align: center;
            font-size: 40px;
            line-height: 400px;
        }

        &.payment {
            background-color: #efefef;
            display: flex;
            justify-content: flex-end;
            margin-top: 50px;

            >span {
                line-height: 40px;
            }

            >button {
                background-color: #191919;
                color: #fff;
                height: 40px;
                padding: 0 10px;
                margin: 0 25px;
            }
        }
    }
}
</style>